<template>
  <div class="table-header">
    <el-form :model="filter" size="small" ref="queryForm" :inline="true" :label-width="labelWidth" @submit.native.prevent>
      <template v-for="item in formArray" :index="item.key">
        <el-form-item :label="item.label">
          <template v-if="item.type === 'input' ">
            <el-input
              v-model="filter.data[item.key]"
              :placeholder="item.placeholder||'请输入'+item.label"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </template>
          <template v-if="item.type === 'select'">
            <el-select v-model="filter.data[item.key]"
                       v-bind="item.attr"
                       :placeholder="item.placeholder|| '请选择'+item.label"
                       :clearable="item.clearable || true"
                       @keyup.enter.native="handleQuery"
                       :filterable="item.filterable || true">
              <template v-for="itm in item.options">
                <el-option
                  :key="itm[(item.props||{}).value]||itm.value"
                  :label="itm[(item.props||{}).label]||itm.label"
                  :value="itm[(item.props||{}).value]||itm.value"
                />
              </template>
            </el-select>
          </template>
          <template v-if="item.type === 'cascader'">
            <el-cascader
              :options="item.options"
              v-model="filter.data[item.key]"
              :key="cascaderNum"
              @change="onchange(item.keys, $event)"
              @keyup.enter.native="handleQuery"
              :placeholder="item.placeholder|| '请选择'+item.label"
              :disabled="item.disabled" :clearable="item.clearable || true"
              :filterable="item.filterable || true" :props="item.props||{}"></el-cascader>
          </template>
          <template v-if="item.type === 'daterange'">
            <el-date-picker
              type="daterange"
              v-model="filter.data[item.key]"
              @change="dateChange($event,item)"
              :value-format="item.format||'yyyy-MM-dd'"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </template>
          <template v-if="item.type === 'date'">
            <el-date-picker
              type="date"
              v-model="filter.data[item.key]"
              :placeholder="item.placeholder|| '请选择'+item.label"
              :value-format="item.format||'yyyy-MM-dd'"
            />
          </template>
          <template v-if="item.type === 'datetime'">
            <el-date-picker
              type="datetime"
              v-model="filter.data[item.key]"
              :placeholder="item.placeholder|| '请选择'+item.label"
              :value-format="item.format||'yyyy-MM-dd HH:mm:ss'"
            />
          </template>
          <template v-if="item.type === 'checkbox'">
            <el-checkbox v-model="filter.data[item.key]">{{ item.placeholder }}</el-checkbox>
          </template>
          <template v-if="item.type === 'slot' ">
            <slot name="filter" :item="item"/>
          </template>
        </el-form-item>
      </template>
      <el-form-item label-width="0">
        <div style="display: flex; align-items: center">
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "tableFilter",
  props: {
    value: Object,
    labelWidth: {
      type: String,
      default: "0"
    },
    formArray: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cascaderNum: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        clickSum: 0
      }
    }
  },
  computed: {
    filter: {
      set(val) {
        // console.log("set")
        this.$emit('input', val)
      },
      get() {
        return this.value
      }
    }
  },
  watch: {
    // 与computed filter重复了
    /*value (val) {
      this.filter = val.data
    },
    filter:{
      deep: true,
      handler(val) {
        console.log("变了阿")
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }*/
  },
  methods: {
    handleQuery() {
      this.filter.pageNum = 1
      this.$emit('search')
    },
    resetQuery() {
      this.initObject()
      this.handleQuery()
    },
    // 联级下拉窗
    onchange(keys, val) {
      if (keys) {
        keys.forEach((item, index) => {
          this.filter.data[keys[index]] = val[index];
          // this.$set(this.filter, keys[index], val[index])
        })
      }
      this.cascaderNum++
    },
    dateChange(val, form) {
      if (val && val.length) {
        this.filter.data[form.startKey || "startTime"] = this.$moment(val[0]).format(form.format || 'YYYY-MM-DD');
        this.filter.data[form.endKey || "endTime"] = this.$moment(val[1]).format(form.format || 'YYYY-MM-DD');
      } else {
        this.filter.data[form.startKey || "startTime"] = undefined;
        this.filter.data[form.endKey || "endTime"] = undefined;
      }
    },
    initObject() {
      Object.keys(this.filter.data).forEach(key => {
        this.filter.data[key] = undefined
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.table-header {
  width: 100%;

}

.el-select, .el-date-editor {
  width: 240px;
}

::v-deep .vue-treeselect__control {
  height: 32px;
  //width: 215px;
  line-height: 32px !important;
}
</style>
